<template>
    <div class="mycollect">
            <div class="post" v-for="(likeli,index) in allcollect" :key="index">
                <div class="top">
                    <a href="javascript:;">
                        <van-image 
                            width="1rem" 
                            height="1rem" 
                            radius="100%" 
                            fit="cover" 
                            :src="likeli.img"
                           
                        />
                        <p>
                            {{likeli.nickname}}
                        </p> 
                    </a>
                    <!-- <van-popover class="deletecollectcontain" style=" margin-right: 0rem;"
                    v-show="showPopover"
                    trigger="click"
                    placement="bottom-end"
                    >    
                    <div class="list">
                        <ul>
                            <li @click="deletelikelis(index)">取消收藏</li>
                        </ul>
                    </div>
                    <template @click="showdeletecollectcontain(index)" #reference>
                        <van-button style="width: 1rem;height: 0.8rem;margin-right: 0rem;border:none">
                            <i style="margin-right: 0rem;" class="iconfont icon-gengduo"></i>
                        </van-button>
                    </template>
                    </van-popover> -->
                </div>
                <div class="font">
                    {{likeli.content}}
                </div>
                <div class="pic">
                    <van-image 
                        width="3rem"
                        height="3rem"
                        fit="cover" 
                        :src="require('../../assets/img/1.jpg')" 
                    />
                    <van-image 
                        width="3rem"
                        height="3rem"
                        fit="cover" 
                        :src="require('../../assets/img/1.jpg')" 
                    />
                    <van-image 
                        width="3rem"
                        height="3rem"
                        fit="cover" 
                        :src="require('../../assets/img/1.jpg')" 
                    />
                </div>
            </div>
            <p id="userid" style="display:none"></p>
    </div>
</template>

<script>
import jwtDecode from 'jwt-decode'
import axios from 'axios'

export default {
    name:'Mycollect',
    data(){
        return{
            allcollect:null,
            decode:null,

        }
    },
    method:{

    },
    mounted(){
        console.log(sessionStorage)
        if(sessionStorage.length==0){
            console.log("尚未登录")
        }else{
            let token=sessionStorage.getItem("token")
            console.log(token)
            //解析token 
            const decode =  jwtDecode(token);
            this.decode = decode
            console.log(decode);
            //赋值用户id
            var userid  = document.getElementById("userid");
            userid.innerHTML=decode.userId;
            //遍历用户收藏内容
            axios({
                url:'/collection/queryCollection',
                method:'get',
                params:{
                    userId:userid.innerHTML
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                }
            }).then(data => { 
                console.log(data)
                console.log("111111111111")
                console.log(data.data.data)
                this.allcollect=data.data.data
                console.log(this.allcollect)
            }).catch(err => {
                console.log(err)
            })
        }

    }
}
</script>

<style lang="less" scope>
.mycollect{
    height: 100%;
    width: 100%;
}

    .post{
        background-color: white;
        padding: 0.25rem;
        margin-bottom: 0.3rem;
        overflow: auto;
        .top{
            display: inline-flex;
            justify-content: space-between;
            flex-direction: row;
            padding-bottom: 0.2rem;
            width: 100%;
            a{
                display: inline-flex;
                align-items: center;
                color: #4b4b4b;
                font-size: 0.4rem;
                p{
                    margin-left: 0.1rem;
                }
            }
            
        }
        .font{
            margin-bottom: 0.2rem;
            font-size: @fontSmall;
        }
        .pic{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            
            .van-image{
                margin-right: 0.15rem;
                margin-bottom: 0.2rem;
            }
            
        }
        .bottom{
            margin-top: 0.2rem;
            display: flex;
            justify-content: space-evenly;
        }
    }
</style>